import Link from "next/link"
import Image from "next/image"
import { Twitter } from "lucide-react"
import DiscordIcon from "@/components/discord-icon"

export default function Footer() {
  return (
    <footer className="bg-dark-blue border-t border-gray-800">
      <div className="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
        <div className="flex justify-center space-x-6 md:order-2">
          <Link  href="https://twitter.com/beraroot" target="_blank" className="text-gray-400 hover:text-bera-yellow">
            <span className="sr-only">Twitter</span>
            <Twitter className="h-6 w-6" />
          </Link>
          <Link href="https://discord.gg/beraroot" target="_blank" className="text-gray-400 hover:text-bera-yellow">
            <span className="sr-only">Discord</span>
            <DiscordIcon defaultColor="#9ca3af" hoverColor="#FFEE33" size={24} />
          </Link>
        </div>
        <div className="mt-8 md:order-1 md:mt-0">
          <Link href="/" className="flex items-center justify-center md:justify-start">
            <Image src="/images/logo-full.png" alt="BeraRoot Logo" width={150} height={40} className="h-8 w-auto" />
          </Link>
          <p className="mt-4 text-center text-xs leading-5 text-gray-400 md:text-left">
            &copy; {new Date().getFullYear()} BeraRoot. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
}
